<template>
  <div class="detail_info">
    <header v-if="Object.keys(detailForm.baseInfo).length !== 0">
      <div class="firm">
        <span>公司:</span>
        <span>{{detailForm.baseInfo.firm}}</span>
      </div>
      <div class="post">
        <span>职位:</span>
        <span>{{detailForm.baseInfo.position}}</span>
      </div>
      <div class="address">
        <span></span>
        <span>{{detailForm.baseInfo.city}}</span>
      </div>
    </header>
    <el-form :model="detailForm"
             ref="detailForm"
             label-width="100px"
             :rules="rules"
             class="baseInfoForm">
      <el-collapse @change="handleChange" v-model="activeNames">
        <!--标题-->
        <el-collapse-item title="标题" name="1">
          <div class="title">
            <el-form-item label="标题" prop="title">
              <el-input v-model="detailForm.title" placeholder="本次面试是怎样的体验呢？快写下来吧"></el-input>
            </el-form-item>
          </div>
        </el-collapse-item>
        <!--背景-->
        <el-collapse-item title="背景" name="2">
          <div class="background">
            <div class="education">
              <el-form-item label="学历" prop="qualification">
                <el-select v-model="detailForm.background.qualification" placeholder="请选择学历">
                  <el-option :label="item"
                             :value="item"
                             v-for="item in qualificationList"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学校" prop="school">
                <el-input v-model="detailForm.background.school" placeholder="请输入学校"></el-input>
              </el-form-item>
              <el-form-item label="专业" prop="major">
                <el-input v-model="detailForm.background.major" placeholder="请输入专业"></el-input>
              </el-form-item>
            </div>
            <div class="experience" v-for="index in detailForm.background.workInfo.length">
              <el-form-item label="在职时长" prop="workYear">
                <el-select v-model="detailForm.background.workInfo[index-1].workYear"
                           placeholder="请选择工作经验">
                  <el-option :label="item"
                             :value="item"
                             v-for="item in workYearList"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="曾任职公司"
                            prop="previousFirm"
                            v-if="hasExperience(index)">
                <el-input v-model="detailForm.background.workInfo[index-1].previousFirm"
                          placeholder="请输入公司名称"></el-input>
              </el-form-item>
              <el-form-item label="曾任职岗位"
                            prop="previousPost"
                            v-if="hasExperience(index)">
                <el-input v-model="detailForm.background.workInfo[index-1].previousPost"
                          placeholder="请输入岗位名称"></el-input>
              </el-form-item>
              <span class="el-icon-delete"
                    title="删除此项工作经历"
                    @click="delExperience(index)"
                    v-if="index > 1"></span>
            </div>
            <div class="add_experience">
              <el-button type="text"
                         class="add"
                         @click="addExperience"
                         :disabled="canAddExperience"></el-button>
            </div>
            <div class="other">
              <el-form-item label="其他补充" prop="other">
                <el-input type="textarea"
                          v-model="detailForm.background.other"
                          placeholder="请补充个人能力说明，以及相关背景介绍"
                          :rows="5"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-collapse-item>
        <!--职位-->
        <el-collapse-item title="职位" name="3">
          <div class="post">
            <el-form-item label="职位描述" prop="postDesc">
              <el-input type="textarea"
                        v-model="detailForm.positionInfo.postDesc"
                        placeholder="请输入职位的相关描述"
                        :rows="5"></el-input>
            </el-form-item>
            <el-form-item label="职位要求" prop="postRequire">
              <el-input type="textarea"
                        v-model="detailForm.positionInfo.postRequire"
                        placeholder="请输入职位的相关要求"
                        :rows="5"></el-input>
            </el-form-item>
          </div>
      </el-collapse-item>
        <!--面试-->
        <el-collapse-item title="面试" name="4">
          <div class="interview">
            <el-form-item label="面试准备" prop="interviewPrepare">
              <el-input type="textarea"
                        v-model="detailForm.interview.interviewPrepare"
                        placeholder="请输入对于该职位面试准备"
                        :rows="5"></el-input>
            </el-form-item>
            <el-form-item label="简历相关" prop="interviewResume">
              <el-input type="textarea"
                        v-model="detailForm.interview.interviewResume"
                        placeholder="请输入简历的相关注意事项"
                        :rows="5"></el-input>
            </el-form-item>
          </div>
          <!--面试详情-->
          <div class="interview_detail">
            <div class="select_interview_counter">
              <el-form-item label="请选择共" prop="interviewCounter">
                <el-select v-model="interviewCounter">
                  <el-option :label="item"
                             :value="item"
                             v-for="item in 10"></el-option>
                </el-select>
              </el-form-item>
              <span>轮面试</span>
            </div>
            <div class="interview_process"
                 v-for="index in detailForm.interview.detail.length"
                 :key="index">
              <h3>第<span>{{interviewRounds(index)}}</span>轮面试</h3>
              <div class="select_interview_message">
                <el-form-item label="时长" prop="interviewTime">
                  <el-input v-model="detailForm.interview.detail[index-1].interviewTime" placeholder="请输入面试时长"></el-input>
                </el-form-item>

                <el-form-item label="类型" prop="interviewType">
                  <el-input v-model="detailForm.interview.detail[index-1].interviewType" placeholder="请输入面试类型"></el-input>
                </el-form-item>
              </div>
              <el-form-item label="过程描述" prop="processDesc" class="process_desc">
                <el-input type="textarea"
                          v-model="detailForm.interview.detail[index-1].processDesc"
                          placeholder="请简单描述面试的过程"
                          :rows="5"></el-input>
              </el-form-item>
              <h4>面试问答:</h4>
              <div class="QAs">
                <div class="QA" v-for="QAIndex in detailForm.interview.detail[index-1].questionList.length">
                  <el-form-item :label="'问题'+QACounter(QAIndex)" prop="question">
                    <el-input type="textarea"
                              v-model="detailForm.interview.detail[index-1].questionList[QAIndex-1].question"
                              :rows="2"
                              placeholder="请输入问题"></el-input>
                  </el-form-item>

                  <el-form-item :label="'回答'+QACounter(QAIndex)" prop="answer">
                    <el-input type="textarea"
                              v-model="detailForm.interview.detail[index-1].questionList[QAIndex-1].answer"
                              :rows="3"
                              placeholder="请输入你的回答"></el-input>
                  </el-form-item>
                  <span class="el-icon-delete"
                        title="删除此问题"
                        @click="delQA(index, QAIndex)"
                        v-if="QAIndex > 1"></span>
                </div>
                <div class="addQA">
                    <el-button type="text" class="add" @click="addQA(index)"></el-button>
                </div>

              </div>
              <div class="tips">
                <el-form-item label="注意事项" prop="tips">
                  <el-input type="textarea" v-model="detailForm.interview.detail[index-1].tips" placeholder="请输入本轮面试的相关注意事项" :rows="5"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="conclude">
              <el-form-item label="面试总结" prop="interviewConclude">
                <el-input type="textarea"
                          v-model="detailForm.interview.interviewConsole"
                          placeholder="分享面试经验，成为更好的自己！"
                          :rows="5"></el-input>
              </el-form-item>
            </div>
          </div>
          <!--面试结果-->
          <div class="interview_feedback">
            <el-form-item label="面试结果" prop="interviewResult">
              <el-select v-model="detailForm.feedback.result">
                <el-option :label="item"
                           :value="item"
                           v-for="item in interviewResultList"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="面试难度" prop="interviewDifficulty">
              <el-select v-model="detailForm.feedback.difficulty">
                <el-option :label="item"
                           :value="item"
                           v-for="item in interviewDifficultyList"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="面试感受" prop="interviewFeeling">
              <el-select v-model="detailForm.feedback.feeling">
                <el-option :label="item"
                           :value="item"
                           v-for="item in interviewFeelingList"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!--发布-->
      <div class="go_publish">
        <el-form-item>
          <el-button type="primary" @click="submitForm('detailForm')">填好了，去发布</el-button>
          <el-checkbox v-model="detailForm.isAnonymous" class="anonymous">匿名发布</el-checkbox>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
  // 引入方法和类
  import {numericTypeConverse} from "common/Utils";
  import {newArticle} from "network/publish";
  import {routerReplaceTimeout} from "common/Utils";

  export default {
    name: "DetailInfo",
    data() {
      return {
        // 展开设置
        activeNames: ['1', '2', '3', '4'],
        user: {
          avatar: 'imgUrl',
          nickname: '匿名用户'
        },
        // 表单选项
        qualificationList: ["小学", "初中", "中专", "高中", "专科", "本科", "硕士研究生", "博士研究生"],
        workYearList: ["无", "三个月", "半年", "一年", "两年", "五年", "十年", "十年以上"],
        interviewResultList: ["通过", "未通过", "未知"],
        interviewDifficultyList: ["很难", "较难", "一般", "容易", "很容易"],
        interviewFeelingList: ["很愉快", "一般", "不好"],
        interviewCounter: 1,
        articleId: '',

        detailForm: {
          userId: this.$store.state.userInfo.id,
          baseInfo: {},
          title: '',
          background: {
            qualification: '',
            school: '',
            major: '',
            other: '',
            workInfo: [
              {
                workYear: '',
                previousFirm: '',
                previousPost: '',
              }
            ],
          },
          positionInfo: {
            postDesc: '',
            postRequire: '',
          },
          interview: {
            interviewPrepare: '',
            interviewResume: '',
            detail: [
              {
                interviewTime: '',
                interviewType: '',
                processDesc: '',
                questionList: [{
                  question: '',
                  answer: '',
                }],
                tips: '',
              }
            ],
            interviewConsole: '',
          },
          feedback: {
            difficulty: '',
            feeling: '',
            result: '',
          },
          isAnonymous: false,
        },
        rules: {
          title: [
            {required: true, message: '请输入标题', trigger: 'blur' }
          ],
        }
      }
    },
    mounted() {
      this.detailForm.baseInfo = this.$route.params.baseInfo
    },
    watch: {
      interviewCounter: 'interviewCounterChange'
    },
    computed: {
      canAddExperience() {
        for(let item of this.detailForm.background.workInfo) {
          if(item.workYear === "无") {
            return true
          }
        }
      },
    },
    methods: {
      // 监听事件的方法
      handleChange(val) {
        console.log(val);
      },
      addExperience() {
        const obj = {
          workYear: '',
          previousFirm: '',
          previousPost: '',
        }
        this.detailForm.background.workInfo.push(obj)
      },
      delExperience(index) {
        this.$confirm('删除此工作经验，是否确定', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.detailForm.background.workInfo.splice(index - 1, 1)
          this.$toast.show('删除成功', 'success', 1000)
        }).catch(() => {
          this.$toast.show('取消删除', 'default', 1000)
        });
      },
      hasExperience(index) {
        return this.detailForm.background.workInfo[index-1].workYear === "无" || this.detailForm.background.workInfo[index-1].workYear === "" ? false : true
      },
      interviewRounds(index) {
        return numericTypeConverse(index)
      },
      interviewCounterChange() {
        const obj = {
          interviewTime: '',
          interviewType: '',
          processDesc: '',
          questionList: [{
            question: '',
            answer: '',
          }],
          tips: '',
        }
        // 增加
        let addCounter = 0
        if(this.interviewCounter > this.detailForm.interview.detail.length) {
          addCounter  = this.interviewCounter - this.detailForm.interview.detail.length
        }
        for(let i = 1; i <= addCounter; i++) {
          this.detailForm.interview.detail.push(obj)
        }
        // 减少
        let delCounter = 0
        if(this.interviewCounter < this.detailForm.interview.detail.length){
          delCounter = this.detailForm.interview.detail.length - this.interviewCounter
        }
        for(let i = 1; i <= delCounter; i++) {
          this.detailForm.interview.detail.pop()
        }
        // console.log(this.detailForm.interviewList)
      },
      QACounter(index) {
        return numericTypeConverse(index)
      },
      addQA(index) {
        const obj = {
          question: '',
          answer: ''
        }
        this.detailForm.interview.detail[index-1].questionList.push(obj)
      },
      delQA(index, QAIndex) {
        this.$confirm('删除此问题，是否确定', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.detailForm.interview.detail[index -1].questionList.splice(QAIndex - 1, 1)
          this.$toast.show('删除成功', 'success', 1000)
        }).catch(() => {
          this.$toast.show('取消删除', 'default', 1000)
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.detailForm)
            newArticle(this.detailForm).then(res => {
              console.log(res)
              if(res.data.code) {
                this.articleId = res.data.data.articleId
                this.$toast.show('面经发布成功，请等待后台管理员审核~', 'success', 2000)
                routerReplaceTimeout(this.$router, '/detail/'+ this.articleId, 2000)
              }
            }).catch(err => {})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
  }
</script>

<style scoped>
  .detail_info {
    width: 1100px;
    height: calc(100vh - 64px);
    margin: 0 auto;
    background-color: #fff;
    font-size: 14px;
  }

  .add {
    position: relative;
    width: 120px;
    height: 35px;
    margin: 0 25px 25px;
    background-color: #3f579e;
    border: 1px solid #eeeeee;
  }

  .add::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 25px;
    margin-left: -13px;
    margin-top: -1px;
    border-top: 2px solid #eee;
    content: '';
  }

  .add::after {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 26px;
    margin-left: -1px;
    margin-top: -13px;
    border-left: 2px solid #eee;
    content: '';
  }

  header {
    padding: 5px 0 0 20px;
    height: 50px;
    line-height: 50px;
  }

  header > div {
    float: left;
    margin-right: 50px;
    font-size: 14px;
  }

  header .firm span:nth-child(1),
  header .post span:nth-child(1) {
    margin-right: 10px;
  }

  header .address span:nth-child(1) {
    margin-right: 2px;
    font-family: icomoon;
    color: #002766;
  }

  .baseInfoForm >>> .el-collapse-item__header {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    color: #002766;
    background-color: rgba(0, 39, 102, 0.008);
  }

  .baseInfoForm >>> .el-collapse-item__header::before {
    position: absolute;
    top: 15px;
    left: 8px;
    width: 3px;
    height: 19px;
    background-color: #002766;
    content: "";
  }

  .baseInfoForm >>> .el-collapse-item__content {
    padding-bottom: 3px;
  }

  .title {
    margin-top: 25px;
    padding-left: 20px;
  }

  .title .el-form-item {
    width: 900px;
  }

  .background {
    margin-top: 25px;
  }

  .background .el-form-item {
    width: 290px;
  }

  .education,
  .experience {
    overflow: hidden;
    padding-left: 20px;
  }

  .education .el-form-item,
  .experience .el-form-item {
    float: left;
    margin-right: 45px;
  }

  .experience .el-icon-delete {
    float: left;
    margin-top: 10px;
    font-size: 16px;
    color: #8F9395;
  }

  .experience .el-icon-delete:hover {
    cursor: pointer;
    color: #002766;
  }

  .add_experience {
    padding-left: 40px;
  }

  .other {
    padding-left: 40px;
  }

  .other .el-form-item {
    width: 900px;
  }

  .el-collapse-item .post {
    margin-top: 25px;
    padding-left: 40px;
  }

  .el-collapse-item .post .el-form-item {
    width: 900px;
  }

  .interview {
    margin-top: 25px;
    padding-left: 40px;
  }

  .interview .el-form-item {
    width: 900px;
  }

  .interview_detail {
    padding-top: 10px;
  }

  .select_interview_counter {
    padding-left: 40px;
    height: 50px;
    line-height: 40px;
    font-weight: 700;
    color: #323030;
    font-size: 15px;
  }

  .select_interview_counter span,
  .select_interview_counter .el-form-item {
    float: left;
    margin: 0;
  }

  .select_interview_counter .el-form-item {
    width: 160px;
    margin-right: 10px;
  }

  .baseInfoForm .select_interview_counter >>> .el-form-item__label {
    color: #323030;
    font-size: 15px;
  }

  .interview_process {
    margin: 20px 60px;
    padding: 20px;
    background-color: rgba(0, 39, 102, 0.02);
    border-radius: 30px;
  }

  .interview_process h3 {
    padding: 10px 40px 20px;
    font-size: 16px;
    color: #2c4168;
  }

  .select_interview_message {
    overflow: hidden;
    padding-left: 40px;
  }

  .select_interview_message .el-form-item {
    float: left;
    width: 290px;
  }

  .process_desc {
    padding-left: 40px;
    width: 800px;
  }

  .interview_process h4 {
    padding: 10px 68px 20px;
    font-size: 14px;
    color: #2c4168;
  }

  .QAs {
    padding-left: 40px;
  }

  .QAs .el-form-item {
    width: 800px;
  }

  .QA {
    position: relative;
  }

  .QA .el-icon-delete {
    position: absolute;
    top: 18px;
    right: 70px;
    font-size: 16px;
    color: #8F9395;
  }

  .QA .el-icon-delete:hover {
    cursor: pointer;
    color: #002766;
  }

  .tips {
    padding-left: 40px;
    width: 800px;
  }

  .conclude {
    padding-left: 40px;
  }

  .conclude .el-form-item {
    width: 900px;
  }

  .interview_feedback {
    padding-left: 40px;
    overflow: hidden;
  }

  .interview_feedback .el-form-item {
    float: left;
    width: 250px;
    margin-right: 40px;
  }

  .el-button--primary {
    background-color: #4361a7;
    border-color: #4361a7;
    color: #fff;
  }

  .el-button--primary:hover {
    background-color: #5177ce;
    border-color: #5177ce;
    color: #fff;
  }

  .go_publish {
    width: 420px;
    margin: 40px auto 0;
    padding-bottom: 20px;
  }

  .go_publish .anonymous {
    margin-left: 30px;
  }

  .baseInfoForm >>> .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #5177ce;
    border-color: #5177ce;
  }

  .baseInfoForm >>> .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #5177ce;
  }

  .baseInfoForm >>> .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #5177ce;
  }

</style>
